<template>
	
	<header :class="[ismOrpc? 'header-nav':'header-nav-wap']">
		<div v-if="!ismOrpc" class="sidebar1 sidebarBox1" >
			<AppMenu v-if="!ismOrpc" :layoutData="layoutData"/>
			<div class="userinfo1">
			<img class="avatar" src="../assets/avatar.png">
				<span class='username'>
					<el-dropdown trigger="click" @command='setDialogInfo'>
						<span class="el-dropdown-link">
							<i class="el-icon-caret-bottom el-icon--right down"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command='info'>修改密码</el-dropdown-item>
							<el-dropdown-item command='logout'>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</span>
		  </div>
       </div>
	   <div v-else style="position: relative;width:100%">
			
		<el-row  style="position: relative;">
					<el-col :span="18">
							<div style="height:122px;position:fixed;left:0;top:0;width:  95%;">
								<PcMenu v-if="ismOrpc" :layoutData="layoutData"/>
								<!-- <div  class="sidebar1 sidebarBox11111111" >
			<el-menu
							mode="horizontal"
							class="el-menu-demo"
							:collapse="collapse"
							:default-active="active"
							background-color="#fff"
							active-text-color="#409eff"
							text-color="#000"
							>
							<div class="wrapper" ref="wrapper" >
								<div v-for="(item,index) in layoutData" :key='index'>
									123
									<div @click="getFunctional(item)" :key="item.menuId" v-if="item.menuId" class="menu-item2">
											<el-menu-item
											v-if="!item.list || item.list ==null || item.list.length == 0"
											:index="item.menuId">
											<div class="name-icon"><i :class="item.icon"></i><span>{{item.name}}</span></div>
											
										</el-menu-item>
									</div>
								<el-submenu v-if="item.list && item.list.length !== 0" :key="item.menuId" :index="item.menuId ? item.menuId : item.name" >
									<template slot="title">
										<div class="name-icon"><i :class="item.icon"></i><span>{{item.name}}</span></div>
									</template>
									<div style="display:flex;flex-wrap:wrap" class="sidebar2">
										<Menu  :layoutData="item.list" />
									</div>
								</el-submenu>
							</div>
							</div>
						</el-menu>
       </div> -->
						</div>
					</el-col>
					<!-- <el-col :span="6" class="user">
					</el-col> -->
				</el-row>
		   <div class="tag-box">
								<div class="width:80%"><tags-view  /></div>
								<div class="userinfo">
							<div class="btn-fullscreen icon-font"  >
								<div class="intro" @click="openDr">
									<i class="el-icon-bell icon"></i>
									<span v-if="countMsg!=0" class="new-msg">{{countMsg}}</span>
								</div>
								<new-msg v-if="drawer" :useBack="drawer" @closeDrawer="onClose"></new-msg>
							</div>
							<div class="btn-fullscreen icon-font">
								<el-tooltip class="item" effect="dark" content="锁屏" placement="bottom">
									<i class="iconfont icon-bofangqi-suoping" @click="handleLockScreen"></i>
								</el-tooltip>
							</div>
							<div class="btn-fullscreen" @click="handleFullScreen">
								<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
									<i class="el-icon-rank"></i>
								</el-tooltip>
							</div>
							<img class="avatar"  src="../assets/u2.png">
							<div class="welcome">
								<p class="name avatarname">{{username}}</p>
							</div>
							<span class='username'>
								<el-dropdown trigger="click" @command='setDialogInfo'>
									<span class="el-dropdown-link">
										<i class="el-icon-caret-bottom el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item command='info'>修改密码</el-dropdown-item>
										<el-dropdown-item command='logout'>退出</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
								
							</span>
						</div>
								</div>
	   </div>
	</header>
</template>
<script>
	import {baseUrl} from '@/tools'
	import BreadCrumb from "./BreadCrumb"
	import TagsView from "./TagsView"
	import Menu from "./Menu"
	import AppMenu from "./AppMenu"
		import PcMenu from "./PcMenu"
	import NewMsg from "./Panel/newmsg"
	import request from "@/tools/request"
	import bus from "../common/bus";
	export default {
		name: 'header',
		components:{
			Menu,
			BreadCrumb,
			TagsView,
			NewMsg,
			AppMenu,
			PcMenu
		},
	
		data() {
			return {
				ceshiWsUrl: 'wss://192.168.0.88:1223/webSocket',
				wsUrl: 'wss://backstage.ztkuaichong.com:3028/webSocket',
				inter: '',
				websockNet: {},
				fullscreen: false,
				modalData1:{},
				showlrc:true,
				username:'',
				active: '/iot/pile/list',
				drawer: false,
				socketData: { "receiverId":window.localStorage.getItem('user_id') },
				collapse: false,
        active: '/iot/pile/list',
        collWidth: '',
				
			}
		},
		computed: {
			users() { //通过vuex获取用户信息
				return this.$store.getters.userInfo
			},
			baseUrl(){
				return baseUrl
			},
			layoutData() {
			    return this.$store.getters.layoutData;
			},
			ismOrpc() {
			    return this.$store.getters.ismOrpc;
			},
			countMsg(){
				return this.$store.getters.newMsg
			},
		},
		created(){
			//初始化websocket,此页面建立了2个长链接
			this.username = window.localStorage.getItem('loginName'),
			this.collWidth = this.$store.getters.ismOrpc ? 'width:180px': 'width:300px'
		},
		mounted(){
		},
		destroyed() {
   },
		methods: {
			getFunctional(item){
      if(this.$route.path!==item.url)
       this.$store.commit('setactivePath',item.url)
		    this.$router.push(item.url)
	  },
			 initScroll() {
      this.scroll = new Bscroll(this.$refs.wrapper, {});
    },
			async countMsgNum() {
      let search = {currPage:1, isRead: 0}
      const res = await request({
        url: "/sys/message/list",
        method: "POST",
        data: search
      });
			// console.log('res.page.totalCount',res.page.totalCount)
      this.$store.commit('changeNewMsg', res.page.totalCount)
      // this.countMsg= res.page.totalCount
      
    },
			openDr(){
				this.drawer = true
			},
			onClose(){
				this.drawer =false
			},
			gohome(url){
				this.$router.push(url)
			},
			setDialogInfo(cmditem) {
				switch (cmditem) {
					case 'info':
						this.showInfoList()
						break;
					case 'logout':
						this.logout()
						break;
					case 'password':
						this.editPass()
						break;
				}
			},
			handleLockScreen(){
				this.$confirm('是否要进行锁屏?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$message({
					type: 'success',
					message: '锁屏成功!'
				  });
				  setTimeout(() => {
					  this.$router.push('/lock')
				  },100)
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '锁屏失效'
				  });          
				});
			},
			showInfoList() {
				this.$router.push('/Infoshow')
			},
			logout() {
				localStorage.removeItem('user_token');
				//清除vuex
				this.$store.dispatch('createUser')
				//路由跳转
				this.$router.push('/login')
			},
			collapseChage() {
				//点击隐藏左侧菜单栏，
				this.collapse = !this.collapse;
				//非父子组件传值
				bus.$emit('collapse', this.collapse);
			},
			// handleNewMsg(){
			// 	this.drawer = 
			// },
			handleFullScreen() {
				//获取到整个html
				let element = document.documentElement;
				if (this.fullscreen) {
					if (document.exitFullscreen) {
						document.exitFullscreen();
					} else if (document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen();
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen();
					} else if (document.msExitFullscreen) {
						document.msExitFullscreen();
					}
				} else {
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.webkitRequestFullScreen) {
						element.webkitRequestFullScreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.msRequestFullscreen) {
						// IE11
						element.msRequestFullscreen();
					}
				}
				this.fullscreen = !this.fullscreen;
			},
			//初始化Websocket--net_info
			initWebSocketNet() {
				if (typeof WebSocket === "undefined"){
					return console.log("您的浏览器不支持websocket");
				}
				// var ws = new WebSocket('wss://127.0.0.1:8443/v1');
				var ws = new WebSocket(this.wsUrl);
				this.websockNet = ws
				this.websockNet.onopen = this.websocketonopenNet;
				this.websockNet.onmessage = this.websocketonmessageNet;
				this.websockNet.onerror = this.websocketonerrorNet;
				this.websockNet.onclose = this.websocketcloseNet;
				
			
				console.log('websockNet',this.websockNet)
				let that = this
				this.inter = setInterval(() => {
					// console.log('100秒')
					that.websocketonopenNet()
				}, 100000);
				
			},
			websocketonopenNet() {
				// console.log("open");
				let action = this.socketData;
				this.websocketsendNet(JSON.stringify(action));
    },
    websocketonerrorNet(e) {
      //链接建立失败重连
			console.log('链接建立失败重连',e)
      this.initWebSocketNet();
    },

		
		websocketonmessageNet(e) {
      //数据接收
      const redata = JSON.parse(e.data);
      console.log("net_info接收的数据", redata);
			this.$store.commit('changeNewMsg', 1)
			this.$notify.info({
          title: '新消息',
          message: redata.message,
					// onClick: () => {
					// 	this.$store.commit('changeNewMsg', 1)
					// 	if(redata.type ==1){
					// 		this.$router.replace({
					// 			path: "/approve/detail",
					// 			query:{id:connectId}
					// 			}, () => {})
					// 	}
					// }
        });
      // this.in_out_total = redata.in_out_total;
    },
    websocketsendNet(Data) {
      //数据发送
      this.websockNet.send(Data);
			// console.log("send", Data);
    },
    websocketcloseNet(e) {
      //关闭
			this.initWebSocketNet();
			clearInterval(this.inter);
      console.log("断开链接", e);
    },
		},
		
		
		
	}
</script>
<style scoped>
    .down{
		color: #000;
	}
	.tag-box{
		position: fixed;
    left: 0px;
    width: 100%;
    top: 100px;
    z-index: 100;
    display: flex;
    background: #fff;
    height: 35px;
    width: 100%;
    /* border-bottom: 1px solid #d8dce5; */
    /* box-shadow: -5px 3px 9px 3px rgba(0, 0, 0, 0.12); */
		box-shadow: -5px 10px 4px -7px rgb(177 47 47 / 48%);
		justify-content: space-between;
	}
	.sidebarBox1 {
	height: 70px;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	}
	.userinfo1 {
		display: flex;
		align-items: center;
	}
	.sidebar1 {
	}
	/* .el-scrollbar__view {
	height: 100%;
	} */
	/* .wrapper {
	width: 100%;
	height: 100%;
	} */
	.header-nav-wap{
		width: 100%;
		height: 60px;
		background: #fff;
		color: #fff;
		border-bottom: 1px solid #fff;
		overflow: hidden;
		padding: 5px 0;
		line-height: 60px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 5;
		box-shadow: 0px 1px 10px #c5c5c5;
	}
	.header-nav {
		width: 100%;
		height: 90px;
		background: #fff;
		color: #000;
		box-shadow: 0 1px 4px 6px rgb(0 21 41 / 8%);
		overflow: hidden;
		padding: 5px 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 5;
	}

	.collapse-btn {
		width: 50px;
		margin-left: 20px;
		display: inline-block;
	}
	.aplayer {
		margin: 0;
	}
	.icon-btn {
		font-size: 36px;
		vertical-align: middle;
		cursor: pointer;
	}

	.logo-container {
		line-height: 60px;
		min-width: 400px;
		padding: 0 5px;
		margin-bottom: 2px;
		position: absolute;
		left: 0px;
		bottom: 16px;
	}

	.logo {
		height: 50px;
		width: 50px;
		margin-right: 5px;
		vertical-align: middle;
		display: inline-block;
	}
	.bread {
		font-size: 14px;
		color: gray;
	}

	.title {
		vertical-align: middle;
		font-size: 22px;
		font-family: "Microsoft YaHei";
		letter-spacing: 3px;
		cursor: pointer;
	}

	.user {
		/* line-height: 60px; */
		text-align: right;
		float: right;
		/* padding-right: 10px; */
	}

	.avatar {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		vertical-align: middle;
		display: inline-block;
	}

	.welcome {
		display: inline-block;
		width: auto;
		vertical-align: middle;
		padding: 0 5px;
	}

	.name {
		line-height: 2px;
		text-align: center;
		font-size: 14px;
	}

	.comename {
		font-size: 12px;
	}

	.avatarname {
		color: #000;
		font-weight: bolder;
	}

	.username {
		cursor: pointer;
		margin-right: 5px;
	}

	.el-dropdown {
		color: #111111;
	}

	.btn-fullscreen {
		position: relative;
		display: inline-block;
		font-size: 24px;
		vertical-align: middle;
		margin-right: 20px;
		transform: rotate(45deg);
		cursor: pointer;
	}

	.icon-font {
		transform: none;

	}

	a {
		text-decoration: none;
		/* color: #fff; */
	}

	.icon-font i {
		font-size: 20px;
	}

	.userinfo {
		display: inline-block;
	}
	.el-message-box {
		width: 321px;
	}
	.el-message {
		min-width: 300px;
	}
	.el-input--medium .el-input__inner {
		min-width: 220px;
		max-width: 300px;
	}
	.el-message-box__wrapper {
		top: 20% !important;
	}
	/* .el-menu-item {
		padding: 0 9px !important
	} */
	.new-msg{
		position: absolute;
    color: white;
    background: red;
    border-radius: 30px;
    top: -4px;
    width: 20px;
    font-size: 13px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 11px
	}
</style>
